<template>
  <div>
    <el-dialog :visible.sync="dialogFormVisible">
      <el-form ref="subform1" :model="form" :rules="rules">
        <!-- 分类名称 -->
        <el-form-item label="分类名称" :label-width="formLabelWidth" prop="cateName">
          <el-input
            v-model="form.cateName"
            auto-complete="off"
            style="margin-right:16px; margin-bottom:10px;"
            :disabled="isDisabled"
          />
        </el-form-item>
        <!-- 排序 -->
        <el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
          <el-input-number
            v-model="form.sort"
            :disabled="isDisabled"
            :min="1"
            type="number"
            style="width:150px; margin-right:16px; margin-bottom:10px;"
          />
        </el-form-item>
        <!-- 首页显示 -->
<!--        <el-form-item label="首页显示" :label-width="formLabelWidth">-->
<!--          <el-switch-->
<!--            v-model="form.status"-->
<!--            active-text="是"-->
<!--            inactive-text="否"-->
<!--            :active-value="1"-->
<!--            :inactive-value="0"-->
<!--          />-->
<!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button plain @click="closeMask">取 消</el-button>
        <el-button v-if="!isDisabled&&info&&!info.id" type="primary" plain @click="submitInfo">确 定</el-button>
        <el-button v-if="!isDisabled&&info&&info.id" type="primary" plain @click="resetInfo">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { addCate, updateCate } from '../../api/category'

export default {
  props: {
    isHidden: {
      type: Boolean,
      default: false
    },
    detailInfo: {
      id: ''
    },
    isDisabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formLabelWidth: '120px', // 列表label宽度
      form: {
        cateName: '', // 分类名称
        status: 1, // 是否首页
        sort: 1
      },
      info: this.detailInfo,
      dialogFormVisible: this.isHidden, // 是否显示弹出框
      rules: {
        cateName: [
          {
            required: true,
            message: '请输入分类名称',
            trigger: 'blur'
          }
        ],
        sort: [
          {
            required: true,
            message: '请输入数字类型',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    dialogFormVisible() {
      this.$emit('checkMask', this.dialogFormVisible)
    }
  },
  mounted() {
    if (this.info && this.info.id) {
      this.form.cateName = this.info.categoryName
      this.form.status = this.info.status
      this.form.sort = this.info.sort
    }
  },
  methods: {
    closeMask() {
      this.$refs['subform1'].resetFields()
      this.dialogFormVisible = false
      this.$emit('checkMask', this.dialogFormVisible)
    },
    submitInfo() {
      if (this.checkInfo()) {
        // 提交表单 隐藏弹窗
        addCate( {
          categoryName: this.form.cateName,
          sort: this.form.sort,
          status: this.form.status
        }).then(res => {
          this.$message({
            showClose: true,
            message: '添加' + res.data.msg,
            type: 'success'
          })
          this.$emit('refresh', {})
          this.closeMask()
        }).catch(res => {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: 'error'
          })
        })
      } else {
        // 弹出错误框
        this.$message({
          showClose: true,
          message: '请填写必要参数',
          type: 'error'
        })
      }
    },
    // 检测参数是否都填写完毕
    checkInfo() {
      if (
        !this.form.cateName ||
        !this.form.sort
      ) {
        return false
      } else {
        return true
      }
    },
    // 编辑以及修改
    resetInfo() {
      if (this.checkInfo()) {
        updateCate ({
          id: this.info.id,
          categoryName: this.form.cateName,
          // status: this.form.status,
          sort: this.form.sort
        }).then(res => {
          if (res.data.code === 7002 || res.data.code === 7113) {
            this.$message.error(res.data.msg)
          } else {
            this.$message({
              showClose: true,
              message: '修改' + res.data.msg,
              type: 'success'
            })
          }
          this.$emit('refresh', {})
          this.closeMask()
        }).catch(res => {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: 'error'
          })
        })
      }
    }

  }
}
</script>
